<template>
  <div>
    <hry-header :title="headerTitle" :showBackBtn="true" backRouterName="home">
      <md-icon
        name="filter"
        slot="action"
        @click="showFullScreen = true"
      ></md-icon>
      <div slot="content" class="main">
        <md-scroll-view
          ref="scrollView"
          :scrolling-x="false"
          :auto-reflow="true"
          @endReached="onEndReached"
          @refreshing="onRefresh"
        >
          <md-scroll-view-refresh
            slot="refresh"
            slot-scope="{ scrollTop, isRefreshActive, isRefreshing }"
            :scroll-top="scrollTop"
            :is-refreshing="isRefreshing"
            :is-refresh-active="isRefreshActive"
          ></md-scroll-view-refresh>
          <div class="time">
            <p class="timeFont">{{ startTime }}</p>
            <p>--8</p>
            <p class="timeFont">{{ endTime }}</p>
          </div>
          <md-result-page
            v-show="isShow"
            style="margin-top: 30px"
            text="暂无数据"
          ></md-result-page>

          <p class="money" v-show="showTime">
            当前查询日期{{ showFont }}总金额为： <span>{{ money }}</span> 元
          </p>

          <cash-value-detail
            v-for="(item, key) in info"
            :key="key"
            :cardItem="item"
          ></cash-value-detail>
          <md-scroll-view-more
            slot="more"
            :is-finished="isFinished"
            finished-text="已经到底啦~"
          >
          </md-scroll-view-more>
        </md-scroll-view>
      </div>
    </hry-header>
    <md-landscape v-model="showFullScreen" full-screen>
      <h1>{{ headerTitle }}筛选</h1>
      <md-field>
        <md-field-item
          name="name"
          title="开始时间"
          arrow="arrow-right"
          align="right"
          :content="startTime"
          @click.native="isDatePickerShow = true"
        >
        </md-field-item>
        <md-field-item
          name="name"
          title="结束时间"
          arrow="arrow-right"
          align="right"
          :content="endTime"
          @click.native="isEndShow = true"
        >
        </md-field-item>
      </md-field>
      <md-button
        type="primary"
        style="width: 80%;margin: 20px auto;"
        @click="inquireBtn"
        >搜索</md-button
      >
      <md-button
        type="primary"
        style="width: 80%;margin: 20px auto;"
        @click="resetBtn"
        >重置</md-button
      >
    </md-landscape>
    <md-date-picker
      ref="datePicker"
      v-model="isDatePickerShow"
      type="custom"
      title="开始时间"
      :text-render="textRender"
      :custom-types="['yyyy', 'MM', 'dd']"
      :default-date="currentDate"
      :max-date="maxDete()"
      :min-date="minDate()"
      @confirm="onDatePickerConfirm"
    ></md-date-picker>
    <md-date-picker
      ref="datePickerEnd"
      v-model="isEndShow"
      type="custom"
      title="结束时间"
      :text-render="textRender"
      :max-date="maxDeteEnd()"
      :min-date="minDateEnd()"
      :custom-types="['yyyy', 'MM', 'dd']"
      :default-date="currentDate"
      @confirm="onDatePickerConfirmEnd"
    ></md-date-picker>
  </div>
</template>

<script>
import {
  DatePicker,
  Field,
  FieldItem,
  Icon,
  Landscape,
  Button,
  ScrollView,
  ScrollViewRefresh,
  ScrollViewMore,
  ResultPage
} from "mand-mobile";
import MdButton from "mand-mobile/components/button/index";
import hryHeader from "@/components/contentWrapper/index";
export default {
  name: "cashValue",
  components: {
    MdButton,
    [Button.name]: Button,
    [DatePicker.name]: DatePicker,
    [Field.name]: Field,
    [FieldItem.name]: FieldItem,
    [Landscape.name]: Landscape,
    [Icon.name]: Icon,
    [ScrollView.name]: ScrollView,
    [ScrollViewMore.name]: ScrollViewMore,
    [ScrollViewRefresh.name]: ScrollViewRefresh,
    [ResultPage.name]: ResultPage,
    hryHeader: hryHeader,
    cashValueDetail: () => import("@/components/cash-value-detail/index.vue")
  },
  data() {
    return {
      showFullScreen: false,
      headerTitle: "",
      currentDate: new Date(),
      isDatePickerShow: false,
      isEndShow: false,
      textRender: "",
      isRecharge: "", //是否是充值页面
      info: [], //会员明细
      money: "",
      showFont: "",
      api: "",
      isShow: false,
      curpage: 1,
      showTime: true,
      isFinished: false,
      startTime: "", //查询开始时间
      endTime: "", //查询结束时间
      startConfirm: false,
      endConfirm: false,
      pullDown: true
    };
  },
  methods: {
    onDatePickerConfirm() {
      this.startTime = this.$refs.datePicker.getFormatDate("yyyy-MM-dd");
      this.startConfirm = true;
    },
    onDatePickerConfirmEnd() {
      this.endTime = this.$refs.datePickerEnd.getFormatDate("yyyy-MM-dd");
      this.endConfirm = true;
    },
    maxDete() {
      if (this.endConfirm) {
        return new Date(this.endTime);
      } else {
        return new Date(this.dete());
      }
    },
    minDate() {
      return new Date("2010-01-01");
    },
    maxDeteEnd() {
      return new Date(this.dete());
    },
    minDateEnd() {
      return new Date(this.startTime);
    },
    onEndReached() {
      if (this.isFinished) {
        return;
      }
      this.curpage++;
      this.getList();
    },
    onRefresh() {
      this.$nextTick(() => {
        this.curpage = 1;
        this.isFinished = false;
        this.getList(true);
      });
    },
    getList(refresh) {
      this.$ajax
        .post(this.api, {
          curpage: this.curpage,
          time_begin: this.startTime,
          time_end: this.endTime
        })
        .then(res => {
          if (refresh) {
            this.info = res.data.data.list;
            this.$refs.scrollView.finishRefresh();
            this.isShow = false;
            this.showTime = true;
          } else {
            this.info.push.apply(this.info, res.data.data.list);
            this.isShow = false;
            this.showTime = true;
          }
          if (this.curpage === res.data.data.total_page) {
            this.isFinished = true;
          }
          if (this.info.length === 0) {
            this.isShow = true;
            this.showTime = false;
          }
          this.money = res.data.data.total_money;
          this.$refs.scrollView.finishLoadMore();
        })
        .catch(err => {
          this.$toast.failed(err);
        });
    },
    dete() {
      let date = new Date();
      let seperator1 = "-";
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let strDate = date.getDate();
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
      }
      let currentdate = year + seperator1 + month + seperator1 + strDate;
      return currentdate;
    },
    inquireBtn() {
      this.curpage = 1;
      this.getList(true);
      this.showFullScreen = false;
    },
    resetBtn() {
      this.endTime = this.dete();
      this.startTime = this.dete();
      this.startConfirm = false;
      this.endConfirm = false;
    }
  },
  mounted() {
    this.$refs.scrollView.triggerRefresh();
  },
  created() {
    this.endTime = this.dete();
    this.startTime = this.dete();
    if (this.$route.path === "/recharge") {
      this.headerTitle = "会员充值明细";
      this.showFont = "充值";
      this.isRecharge = true;
      this.api = this.$api.getMemberRechargeList;
    } else {
      this.headerTitle = "会员提现明细";
      this.showFont = "提现";
      this.isRecharge = false;
      this.api = this.$api.getMemberGetcashList;
    }
  }
};
</script>

<style scoped lang="stylus">
h1{
  font-size 34px
  line-height 60px
  text-align center
}
.main{
    height 100%;
    overflow hidden
}
.time{
    padding 0 30px;
    margin-top 30px;
    display flex;
    justify-content center;
}
.time>p:nth-of-type(2){
    margin 0 15px;
}
   .timeFont{
       color #fd7400
   }
.money{
    text-align center;
    margin-top 30px;
}
.money>span{
    color #fd7400
}

</style>
